<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网支付</title>
<!-- 此页面已经放入front目录下 -->
<base href="../"/>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/pay.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        
        <!-- 登陆会员检查 和 会员信息展示 -->
        <div class="header-info" id="login_info">
            <div class="login-info" >
            	<a v-if="isLogin" href="front/user.html" title="个人信息" target="_blakn">欢迎凝: {{memberInfo.nickName}}</a>
            	<a v-else href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <!-- ref  -->
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" ref="gname" id="search"/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>
            
            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据  :data-tno -->
            </div>
        </div>
    </div>
</header>

 
<div id="app">
	<!-- 收货地址 -->
	<h3 class="common_title">确认收货地址</h3>
	
	<div class="common_list_con clearfix">
	    <input type="hidden" id="default_addr"/>
	    <input type="hidden" id="current_addr"/>
	    <dl id="addr_list">
	        <dt>寄送到：</dt>
	        <dd v-for="addr in addrs" :class="[addr.flag == 1 ? 'current_location' : 'default_location']" :data-ano="addr.ano">
	        	{{addr.province}}&nbsp;{{addr.city}}&nbsp;{{addr.area}}&nbsp;{{addr.addr}}&nbsp;（{{addr.name}} 收）&nbsp;{{addr.tel}}
	        </dd>
		</dl>
	    <a href="javascript:showAddrDiv()" class="edit_site">编辑收货地址</a>
	</div>
	
	<!-- 支付方式 -->	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
	    <div class="pay_style_con clearfix">
	        <input type="radio" name="pay_style" checked>
	        <label class="cash">货到付款</label>
	        <input type="radio" name="pay_style">
	        <label class="weixin">微信支付</label>
	        <input type="radio" name="pay_style">
	        <label class="zhifubao"></label>
	        <input type="radio" name="pay_style">
	        <label class="bank">银行卡支付</label>
	    </div>
	</div>
	
	<!-- 商品列表 -->
	<h3 class="common_title">商品列表</h3>
	<div class="common_list_con clearfix" id="order_list">
	    <ul class="goods_list_th clearfix">
	        <li class="col01">商品名称</li>
	        <li class="col02">商品单位</li>
	        <li class="col03">商品价格</li>
	        <li class="col04">数量</li>
	        <li class="col05">小计</li>		
	    </ul>
	    <ul class="goods_list_td clearfix" v-for="(item, index) in orders">
	        <li class="col01">{{ index + 1}}</li>			
	        <li class="col02"><img :src="item.pics"></li>
	        <li class="col03">{{ item.gname}}</li>
	        <li class="col04">{{ item.weight}} / {{ item.unit}}</li>
	        <li class="col05">{{ item.price}}元</li>
	        <li class="col06">{{ item.num}}</li>
	        <li class="col07" v-html="(item.num * item.price).toFixed(2) + '元'"></li>	
	    </ul>
	 
	</div>
	 
	<!-- 金额结算 -->	
	<h3 class="common_title">总金额结算</h3>
	<div class="common_list_con clearfix">
	    <div class="settle_con">
	        <div class="total_goods_count">共<em id="totalcount">{{totalCount}}</em>件商品，总金额<b id="total_price">{{totalPrices}}</b></div>
	        <div class="transit">运费：<b>10元</b></div>
	        <div class="total_pay">实付款：<b id="total_pay" >{{ (totalPrices * 1 + 10).toFixed(2)}}</b></div>
	    </div>
	</div>
</div>    


<div class="order_submit clearfix">
    <a href="javascript:void(0);" id="order_btn" onclick="payOrder()">提交订单</a>
</div>	


<div id="addr_div">
    <img src="images/close.png" title="关闭" onclick="hiddenDiv()"/>
    <form id="myform">
        <ul>
            <li>
                <label for="addr_name">收货人：</label>
                <input id="addr_name" name="name" type="text" placeholder="请输入收货人姓名..." />
            </li>
            <li>
                <label for="addr_tel">联系方式：</label>
                <input id="addr_tel" name="tel" type="text" placeholder="请输入收货人联系方式..." />
            </li>
            <li>
                <label>收货地址：</label>
                <select id="province" name="province"></select>
                <select id="city" name="city">
                    <option value="0">--请选择城市--</option>
                </select>
                <select id="area" name="area">
                    <option value="0">--请选择地区--</option>
                </select>
            </li>
            <li>
                <label for="addr_addr">详细地址：</label>
                <input id="addr_addr" name="addr" style='width: 480px;' type="text" placeholder="请输入详细地址（街道、门牌等）" />
            </li>
            <li class="addr_btn">
                <a href="javascript:addAddr()" >添加收货地址</a>
            </li>
        </ul>
    </form>
</div>
 
<div class="popup_con">
    <div class="popup">
        <p>订单提交成功，3秒后自动跳转到首页...</p>
    </div>
    <div class="mask"></div>
</div>    
        
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/addr.js"></script>

<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/axios.js"></script>
<script type="text/javascript" src="js/vue/qs.js"></script>

<!-- 引入检查登陆和 类型 购物车 公共JS文件 -->
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">


let app = new Vue({
	el: "#app",
	data:{
		orders: [], //订单
		totalPrices: 0,//总价
		totalCount: 0,//总件数
		addrs:[], //地址信息
	},
	mounted(){
		//TODO 获取登陆用户的收货地址  
		axios.get("addr/finds").then( result=>{
			if( result.status != 200 ){
				showMsg("网络异常请稍后再试...", "red");
				return;
			}
				
			if( result.data.code == 500 ){
				showMsg("暂无收货地址，请先添加收货地址...", "red");
				return;
			}
			if( result.data.code == 200){
				this.addrs = result.data.data;
				
				this.$nextTick(function(){
					bindInfo(); //选中地址
				})
			}
		})
	
	
		// TODO 获取登陆用户的结算购物车信息
		let cnos = localStorage.getItem("cnos"); // 将数组以逗号的方式拼接成字符串  存储在键 cnos 中
		if(!cnos){
			showMsg("请选择您要购买的商品！！！", "red", ()=>{location.href = "front/cart2.html";});
			return;
		}
		
		// TODO 发送 购物车编号查询 请求
		axios.post("cart/findByCno", qs.stringify( { cnos } )).then( res=>{
			if (res.status == 200 && res.data.code == 200){  // 请求和响应成功
				this.orders = res.data.data;  // 所有购物车信息
				// 遍历购物车信息 
				this.orders.forEach((item, index) => {
					this.totalCount += item.num;   // 总数量
					this.totalPrices += item.num * item.price;  // 总价格
				})
				// 格式化总价  保留两位小数
				this.totalPrices = this.totalPrices.toFixed(2);
				return;
			}
		})
	}
})


//显示地址模板
function showAddrDiv() {
	$("#addr_div").css("display", "block");
}

//隐藏地址模块
function hiddenDiv() {
	$("#addr_div").css("display", "none");
}

//选中默认地址
function bindInfo(){
	$("#addr_list > dd").click(function(){
		$("#addr_list > dd").removeClass("current_location");
		$("#addr_list > dd").addClass("default_location");
		$(this).removeClass("default_location");
		$(this).addClass("current_location");
	})
}

// 添加地址
function addAddr(){
	let flag = true;
	//遍历表单控件 验证空
	$("#myform input, #myform select").each(function(index, item){
		if( item.value == "" || item.value  == "--请选择省份--"){
			showMsg("您输入的信息不完成,请完善后重新提交...", "red");
			flag = false;
			return false;
		}
	})
	if( !flag){ return; }//阻止下方的表单提交
	
	// 发送添加地址的请求  表单序列化
	$.post("addr/add", $("#myform").serialize(), res =>{
		if( res.code == 200){
			let obj = {ano: res.msg};//地址编号
			obj.name = $.trim($("#addr_name").val());
			obj.tel = $.trim($("#addr_tel").val());
			obj.province = $.trim($("#province").val());
			obj.city = $.trim($("#city").val());
			obj.area = $.trim($("#area").val());
			obj.addr = $.trim($("#addr_addr").val());
			obj.flag = 0;// 1 默认  0 常用地址
			app.$data.addrs.push( obj);// 同步前端的地址信息
			$("#myform")[0].reset();// 重置表单
			hiddenDiv();
			return;
		}	
		showMsg("收货地址添加失败，请刷新后重试....", "red");
	}, 'json');
}

// TODO 提交订单
function payOrder(){
	
	// 获取登陆用户的结算购物车信息
	

}
</script>
</body>
</html>
